import React, { useState, useEffect } from 'react';
import { Table } from 'antd';
import { mockOrderList } from '../../mock/orderFrom';
import './OrderForm.css';
import { Pagination,Input, Space} from 'antd';
import { SearchOutlined } from '@ant-design/icons';

interface OrderItem {
  id: number;
  orderNo: string;
  productImage: string;
  productInfo: string;
  specifications: string;
  quantity: number;
  amount: number;
  shippingFee: number;
  orderStatus: string;
  shippingStatus: string;
  trackingNo: string;
  paymentTime: string;
  shippingInfo: string;
  supplier: string;
}

const OrderForm: React.FC = () => {
  const [fullData] = useState<OrderItem[]>(mockOrderList.list);
  const [currentPageData, setCurrentPageData] = useState<OrderItem[]>([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(10);
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    const filteredData = fullData.filter(item => {
      return item.orderNo.toLowerCase().includes(searchTerm.toLowerCase()) ||
             item.productInfo.toLowerCase().includes(searchTerm.toLowerCase());
    });

    const indexOfLastItem = currentPage * itemsPerPage;
    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
    const currentItems = filteredData.slice(indexOfFirstItem, indexOfLastItem);

    setCurrentPageData(currentItems.map(item => ({
      key: item.id,
      ...item
    })));
  }, [currentPage, itemsPerPage, fullData, searchTerm]);

  const handleSearch = (value: string) => {
    setSearchTerm(value);
    setCurrentPage(1);
  };

  const handlePaginationChange = (page: number, pageSize?: number) => {
    setCurrentPage(page);
    if (pageSize) {
      setItemsPerPage(pageSize);
    }
  };

  const columns = [
  {
    title: '商品图片',
    dataIndex: 'productImage',
    key: 'productImage',
    render: (text: string, record: OrderItem) => (
      <img src={record.productImage} alt={record.productInfo} style={{ width: '40px', height: '40px', objectFit: 'cover', borderRadius: '4px' }} />
    ),
  },
  {
    title: '订单编号',
    dataIndex: 'orderNo',
    key: 'orderNo',
  },
  {
    title: '商品信息',
    dataIndex: 'productInfo',
    key: 'productInfo',
  },
  {
    title: '规格',
    dataIndex: 'specifications',
    key: 'specifications',
  },
  {
    title: '数量',
    dataIndex: 'quantity',
    key: 'quantity',
  },
  {
    title: '金额',
    dataIndex: 'amount',
    key: 'amount',
    render: (text: number) => `¥${text?.toFixed(2)}`,
  },
  {
    title: '运费',
    dataIndex: 'shippingFee',
    key: 'shippingFee',
    render: (text: number) => `¥${text?.toFixed(2)}`,
  },
  {
    title: '订单状态',
    dataIndex: 'orderStatus',
    key: 'orderStatus',
  },
  {
    title: '物流状态',
    dataIndex: 'shippingStatus',
    key: 'shippingStatus',
  },
  {
    title: '物流单号',
    dataIndex: 'trackingNo',
    key: 'trackingNo',
  },
  {
    title: '支付时间',
    dataIndex: 'paymentTime',
    key: 'paymentTime',
  },
];

  

  return (
    <div className="order-form-container">
      <h1 className="order-form-title">订单列表</h1>
      <div className="order-search-container">
        <Space>
          <Input
            placeholder="搜索订单编号或商品信息"
            prefix={<SearchOutlined />}
            onChange={(e) => handleSearch(e.target.value)}
            style={{ width: '300px' }}
            allowClear
          />
        </Space>
      </div>
      <div className="table-container">
        <Table 
          columns={columns} 
          dataSource={currentPageData} 
          pagination={false}
          scroll={{ y: window.innerHeight - 300 }}
          rowKey="id"
        />
      </div>
      <div className="order-pagination-container">
        <Pagination
          current={currentPage}
          pageSize={itemsPerPage}
          total={fullData.length}
          onChange={handlePaginationChange}
          onShowSizeChange={handlePaginationChange}
          showSizeChanger
          pageSizeOptions={[10, 20, 50, 100]}
        />
      </div>
    </div>
  );
};

export default OrderForm;